<template>  
    <view class="container">  
		
		<view class="user-section">
			<image class="bg" src="/static/user-bg.jpg"></image>
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="userinfo.headimgurl "></image>
				</view>
				<view class="info-box" >
					<text class="username" style="width: 100%;display: block;margin-bottom: 10upx;">{{userinfo.nickname}}</text>
					<text class="username" style="font-size: 32upx;">UID:{{userinfo.unionid}}</text>
					<view>
						<text class="username" style="font-size: 32upx;min-width: 150rpx;">微信号:{{userinfo.wechat}}</text>
						<text style="font-size: 28upx;padding: 5rpx 20rpx;background: rgb(84, 180, 239);color: white;margin-left: 10rpx;border-radius: 6rpx;"  @click="seePoups=!seePoups" >
							修改
						</text>
						
					</view>
					
				</view>
				<view class="info-box">
					
				</view>
			</view>
			<!-- <view class="vip-card-box">
				<image class="card-bg" src="/static/vip-card-bg.png" mode=""></image>
				<view class="b-btn">
					立即开通
				</view>
				<view class="tit">
					<text class="yticon icon-iLinkapp-"></text>
					DCloud会员
				</view>
				<text class="e-m">DCloud Union</text>
				<text class="e-b">开通会员开发无bug 一测就上线</text>
			</view> -->
		</view>
		
		<view 
			class="cover-container"
			:style="[{
				transform: coverTransform,
				transition: coverTransition
			}]"
			@touchstart="coverTouchstart"
			@touchmove="coverTouchmove"
			@touchend="coverTouchend"
		>
			<image class="arc" src="/static/arc.png"><text style="margin-right: 40upx;">级别:</text><text class="num">{{userinfo.jibie}}</text>
					</image>
			
			<!-- <view class="tj-sction">
				<view class="tj-item">
					
				</view>
				<!-- <view class="tj-item">
					<text class="num">0</text>
					<text>优惠券</text>
				</view>
				<view class="tj-item">
					<text class="num">20</text>
					<text>积分</text>
				</view> 
			</view> -->
			<!-- 订单 -->
			<view class="order-section">
				<view class="order-item" @click="navTo('/pages/order/orderList?state=0')" hover-class="common-hover"  :hover-stay-time="50">
					<text class="yticon icon-shouye"></text>
					<text>全部订单</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/orderList?state=1')"  hover-class="common-hover" :hover-stay-time="50">
					<text class="yticon icon-daifukuan"></text>
					<text>待付款</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/orderList?state=2')" hover-class="common-hover"  :hover-stay-time="50">
					<text class="yticon icon-yishouhuo"></text>
					<text>待收货</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/orderList?state=4')" hover-class="common-hover"  :hover-stay-time="50">
					<text class="yticon icon-shouhoutuikuan"></text>
					<text>退款/售后</text>
				</view>
			</view>
			<!-- 浏览历史 -->
			<view class="history-section icon">
				<!-- <view class="sec-header">
					<text class="yticon icon-lishijilu"></text>
					<text>浏览历史</text>
				</view>
				<scroll-view scroll-x class="h-list">
					<image @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105186633&di=c121a29beece4e14269948d990f9e720&imgtype=0&src=http%3A%2F%2Fimg004.hc360.cn%2Fm8%2FM04%2FDE%2FDE%2FwKhQplZ-QteEBvsbAAAAADUkobU751.jpg" mode="aspectFill"></image>
					<image @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105231218&di=09534b9833b5243296630e6d5b728eff&imgtype=0&src=http%3A%2F%2Fimg002.hc360.cn%2Fm1%2FM05%2FD1%2FAC%2FwKhQcFQ3iN2EQTo8AAAAAHQU6_8355.jpg" mode="aspectFill"></image>
					<image @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105320890&di=c743386be51f2c4c0fd4b75754d14f3c&imgtype=0&src=http%3A%2F%2Fimg007.hc360.cn%2Fhb%2FMTQ1OTg4ODY0MDA3Ny05OTQ4ODY1NDQ%3D.jpg" mode="aspectFill"></image>
					<image @click="navTo('/pages/product/product')" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2691146630,2165926318&fm=26&gp=0.jpg" mode="aspectFill"></image>
					<image @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105443324&di=8141bf13f3f208c61524d67f9bb83942&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01ac9a5548d29b0000019ae98e6d98.jpg" mode="aspectFill"></image>
					<image @click="navTo('/pages/product/product')" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=191678693,2701202375&fm=26&gp=0.jpg" mode="aspectFill"></image>
				</scroll-view> -->
				<list-cell icon="icon-erjiye-yucunkuan" iconColor="#e07472" title="德福公共分红池" @eventClick="navTo('/pages/user/fenhongindex')"></list-cell>
				 <list-cell icon="icon-iconfontweixin" iconColor="#e07472" title="我的钱包" @eventClick="navTo('/pages/user/log')"></list-cell>
				 <list-cell icon="icon-zuoshang" title="车基金" iconColor="#FA436A"  @eventClick="navTo('/pages/user/chejijin')"></list-cell>
				 <list-cell icon="icon-zuoshang" title="我的车积分" iconColor="#FA436A"  @eventClick="navTo('/pages/user/chejifen')"></list-cell>
				 <list-cell icon="icon-iconfontweixin" iconColor="#909399" title="扣押奖金" @eventClick="navTo('/pages/user/hidenlog')"></list-cell>
				<list-cell icon="icon-dizhi" iconColor="#5fcda2" title="地址管理" @eventClick="navTo('/pages/address/address')"></list-cell>
				<list-cell icon="icon-share" iconColor="#9789f7" title="分享"  @eventClick="navTo('/pages/user/share')"></list-cell>
				<list-cell icon="icon-pinglun-copy" iconColor="#ee883b" title="立即关注" tips="关注公众号" @eventClick="navTo('/pages/follow/follow')"></list-cell>
				<list-cell icon="icon-shoucang_xuanzhongzhuangtai" iconColor="#54b4ef" title="我的粉丝"  @eventClick="navTo('/pages/user/index')"></list-cell>
				<list-cell icon="icon-tuijian" iconColor="#54b4ef" title="帮扶区"  @eventClick="navTo('/pages/user/teams')"></list-cell>
				<!-- <list-cell icon="icon-zuanshi" title="试喝店铺" iconColor="#FA436A"  @eventClick="navTo('/pages/user/try_mall')"></list-cell>
				<list-cell icon="icon-shoucang" title="立即试喝" iconColor="#FA436A"  @eventClick="navTo('/pages/user/try')"></list-cell>
				<list-cell icon="icon-zuoshang" title="啤酒提货单" iconColor="#FA436A"  @eventClick="navTo('/pages/user/beer_order')"></list-cell> -->
				
			</view>
		</view>
			
		<view class="marke" v-show="seePoups">
			<view class="withdraw">
				<icon @click="seePoups=false" class="cancel" type="clear" size="24" color="#ccc"></icon>
				<view class="markeTitle">修改微信号</view>
				
				<input class="moneyBox" type="digit" cursor-spacing="50px" placeholder="请输入微信号" :value="wechat"
					placeholder-class="tips" @blur="changewechat" />
				<!-- <view class="btnGroup item-flex flex-around">
					<button>取消</button>
				</view> -->
				<button @click="tijiao2">确定</button>
		
			</view>
		</view>
    </view>  
</template>  
<script> 
 
	import listCell from '@/components/mix-list-cell';
	import wxshare from '@/util/wxshare.js'
    import {  
        mapState 
    } from 'vuex';  
	let startY = 0, moveY = 0, pageAtTop = true;
    export default {
		components: {
			listCell
		},
		data(){
			return {
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				userinfo:[],
				data:'',
				pid:'',
				seePoups:false,
				wechat:''
			}
		},
		onLoad(){
			//this.pid=options.pid;
			
		},
		onShow() {
			let routes =location.href;
			var vars = routes.split("pid=");
			            for (var i=0;i<vars.length;i++) {
			                var pair = vars[i].split('&&');
			               // if(pair[0] == variable){return pair[1];}
			            }
			//let curRoute = routes[routes.length - 1].route //获取当前页面路由
			// console.log(vars,'水水水水水水水水水水');
			if(pair[0]){
			 this.pid=pair[0];
			 }
			const res=  uni.getStorage({
			    key: 'userInfo',
			    success: (res)=> {

					if(res.data){
						//console.log(res.data,'ssssss')
			     this.userinfo=res.data
				 if(this.userinfo.member_id){
					 this.getSignPackage()
					 this.getuseragain();
				 }
				 }else{
					 window.location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9a8339b68f86cd01&redirect_uri=http%3A%2F%2Fpth5.njkw668.com%2F%23%2Fpages%2Fpublic%2Flogin&response_type=code&scope=snsapi_userinfo&state='+this.pid+'#wechat_redirect';
				 }
			    },
				fail: (res)=> {			
				window.location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9a8339b68f86cd01&redirect_uri=http%3A%2F%2Fpth5.njkw668.com%2F%23%2Fpages%2Fpublic%2Flogin&response_type=code&scope=snsapi_userinfo&state='+this.pid+'#wechat_redirect';
				}
			});
		},
		
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/set/set');
			}else if(index === 1){
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		},
		// #endif
        computed: {
			//...mapState(['hasLogin','userInfo'])
		},
        methods: {
			changewechat(e) {
			
				this.wechat = e.detail.value
				//console.log(e)
			
			},
			async tijiao2() {
				if(this.wechat==''){
					uni.showToast({
						title: '请输入微信号',
						icon: 'none'
					})
					return false
				}
				const res = await this.$myRequest({
					url: 'index.php/api/user/changewechat',
					method: "POST",
					data: {
						"member_id": this.userinfo.member_id,
						'wechat': this.wechat
					},
				})
				if (res.status == 200) {
					uni.showToast({
						title: res.data,
						icon: 'none'
					})
					setTimeout(() => {
					    uni.reLaunch({
					    	url: '/pages/user/user'
					    })
					}, 2000)
				}
			},
			async getuseragain(){
				
				const res=await this.$myRequest({
						url:'index.php/api/user/getuserinfo',
						method:"POST",
						data:{
							"member_id":this.userinfo.member_id,
							
						},
						
					
				})	
				if(res.status==200){
				this.userinfo=res.data
				}
			},
			async getSignPackage(){
				//console.log(this.userinfo)
				let url =window.location.href
				const resss= await this.$myRequest({
					url:'index.php/api/jssdkaaa/getSignPackage',
					method:"POST",
					data:{
						url:url
					}
					
				})
				
					//console.log(resss,'111111111')
					this.data=resss.data 
					this.setWxShare(resss.data)
					
				
				
				
			}, 
			 setWxShare(data) {
				 let url ="http://pth5.njkw668.com/#/pages/user/user?&pid="+this.userinfo.member_id+"&&";
				 //console.log(url)
				wxshare.config({
					debug: false,//是否打开调试
					appId: data.appId, // 公众号的唯一标识  
					timestamp: data.timestamp, // 生成签名的时间戳  
					nonceStr: data.nonceStr, // ，生成签名的随机串  
					signature: data.signature, // 签名  
					jsApiList: [
			                            "updateAppMessageShareData",
										"updateTimelineShareData",
			                           
			                            "showMenuItems",
			                           
			       
			       ]
				});
			  

			
				wxshare.ready(function() {
					wxshare.showMenuItems({
					      menuList: ['menuItem:share:appMessage','menuItem:share:timeline','menuItem:share:timeline', 'menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone','menuItem:openWithSafari'] // 要显示的菜单项，所有menu项见附录3
					    });
					// wxshare.showMenuItems({
					//       menuList: [
					// 		  "menuItem:share:appMessage",
					// 	  "menuItem:share:timeline"
					// 	   ] // 要显示的菜单项，所有menu项见附录3
					//     });
					 
					
			        //分享给朋友
					wxshare.updateAppMessageShareData({
						title: "微贝臻选" ,// 分享标题  
						desc: "微贝臻选" , // 分享描述  
						link: url, // 当前页面链接  
						imgUrl:"http://pth5.njkw668.com/static/64.jpg", // 分享图标                                
						success: function() {//分享成功回调
							 
						},
						cancel: function() {//取消分享回调
						 
						}
					});
					//分享到朋友圈
					wxshare.updateTimelineShareData({
						title: "微贝臻选" , // 分享标题
						link: url, // 分享链接
						desc: "微贝臻选" , // 分享描述  
						imgUrl: "http://pth5.njkw668.com/static/64.jpg", // 分享图标                               
						success: function() {
							
						},
						cancel: function() {
						
						}
					});
				})
			 
			},
			// gotourl(){
			// 	console.log('11111')
			// uin.navigateTo({
			// 	url:""
			// })
			// },

			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url){
				//console.log(this.userinfo);
				 if(this.userinfo==''){
					url = '/pages/address/address';
				}
				uni.navigateTo({  
					url
				})  
			}, 
	
			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e){
				if(pageAtTop === false){
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e){
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if(moveDistance < 0){
					this.moving = false;
					return;
				}
				this.moving = true;
				if(moveDistance >= 80 && moveDistance < 100){
					moveDistance = 80;
				}
		
				if(moveDistance > 0 && moveDistance <= 80){
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend(){
				if(this.moving === false){
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			}
        }  
    }  
</script>  
<style lang='scss'>
	.marke {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.withdraw {
		width: 80%;
		background: #fff;
		border-radius: 20rpx;
		position: relative;
	}
	
	.markeTitle {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333;
		text-align: center;
		background: #f5f5f5;
		border-radius: 20rpx 20rpx 0 0;
	}
	
	.moneyBox {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 2rpx solid red;
		margin: 20rpx 5%;
		text-align: center;
		font-size: 42rpx;
		font-weight: bold;
		color: red;
	}
	
	.tips {
		font-size: 30rpx;
		color: #bebebe;
		text-align: center;
		font-weight: normal;
	}
	
	.withdraw button {
		width: 90%;
		margin: 20rpx 5%;
		margin-top: 40rpx;
		font-size: 32rpx;
		height: 88rpx;
		line-height: 88rpx;
		border: none;
		background: #007AFF;
		color: #fff;
	}
	
	.withdraw button::after {
		border: none;
	}
	
	.cancel {
		position: absolute;
		top: -20rpx;
		right: -20rpx;
		background: #fff;
		border-radius: 50%;
		z-index: 999;
	
	}
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  
	  border-radius: 10upx;
	}

	.user-section{
		height: 520upx;
		padding: 100upx 30upx 0;
		position:relative;
		.bg{
		
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}
	.user-info-box{
		height: 180upx;
		display:flex;
		align-items:center;
		position:relative;
		z-index: 1;
		.portrait{
			width: 130upx;
			height: 130upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.username{
			font-size: $font-lg + 6upx;
			color: $font-color-dark;
			margin-left: 20upx;
		}
	}

	.vip-card-box{
		display:flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,.8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;
		.card-bg{
			position:absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}
		.b-btn{
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 132upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}
		.tit{
			font-size: $font-base+2upx;
			color: #f7d680;
			margin-bottom: 28upx;
			.yticon{
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}
		.e-b{
			font-size: $font-sm;
			color: #d8cba9;
			margin-top: 10upx;
		}
	}
	.cover-container{
		background: $page-color-base;
		margin-top: -150upx;
		padding: 0 30upx;
		position:relative;
		background: #f5f5f5;
		padding-bottom: 20upx;
		.arc{
			position:absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}
	.tj-sction{
		@extend %section;
		.tj-item{
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}
		.num{
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}
	.order-section{
		@extend %section;
		padding: 28upx 0;
		margin-top: 20upx;
		.order-item{
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
		}
		.yticon{
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}
		.icon-shouhoutuikuan{
			font-size:44upx;
		}
	}
	.history-section{
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius:10upx;
		.sec-header{
			display:flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;
			.yticon{
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}
		.h-list{
			white-space: nowrap;
			padding: 30upx 30upx 0;
			image{
				display:inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}
	
</style>